<!DOCTYPE html >
<html lang ="zh-CN">
<head>
    <meta  charset="UTF -8">
    <meta  name="viewport " content=" width=device -width, initial -scale=1.0">
     <title> 读书笔记共享</title >
    <style >
header {
            background-color: #007bff;
            color: white;
            padding: 20px 0;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
        nav {
            display: flex;
			justify-content: center;
            background-color: #0056b3;
        }
        nav a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
            transition: background-color 0.3s;
        }
		nav a:hover {
		    background-color: #007bff;
		}
		 .search-container{
			 padding: 10px;
			  border-radius: 5px;  
			  display: flex;
			  align-items: center;  
			  margin:auto;
			 			left:0;
			      		top:0;
						height:35px;
						 border: 3px solid #ccc;
						 display: flex;
			 width:1300px;
		 }
		 .search-input {
			 width:80px;
			 height:20px;
		     padding: 5px;  
		     border: 1px solid #ccc;
					  }
			.search-container h3{
			align-items: center;
			margin:10px;
			display: flex;
			}
			.search-button{
			height:30px;
			width:60px;
			background-color: royalblue;
			color:white;
			margin:10px;
			align-items: center;
			}
        .container{
            width: 1324px;
            margin: auto;
            border: 1px solid #ccc;
            overflow: hidden;
			border-radius: 5px;
         }
		 .card {
		         width:250px;
		         overflow: hidden;
		         float: left;
		         margin:20px;
		         padding: 10px;
		         border: 3px solid #ccc;
			  transition :0.3s;
		  }
  .card:hover {
              box-shadow : 0 8px 16px  0 rgba(0,  0, 0, 0.2);
         }
         .card img {
              width: 250px;
             height: 200px;
             object-fit : cover;
         }
        .card h2 {
             text-align : center;
			 
             margin:10px;
			 color:steelblue;
         }
    </style >
</head>
<body>
<header>
    资源共享平台
</header>

<nav>
    <a href="demo1.html">首页</a>
    <a href="" style="background-color:#007bff">笔记分享</a>
    <a href="demo.html">交流互动</a>
    <a href="#">公告信息</a>
    <a href="#">个人中心</a>
    <a href="#">后台管理</a>
</nav>
<div class="search-container">
	<h3>笔记名称</h3>
	<input type="text" class="search-input" >  
	<h3>笔记类型</h3>
	<select style="search-input">
					<option value="option1">符号式</option>
					<option value="option2">摘录式</option>
					<option value="option3">自我总结式</option>
					<option value="option3">感想式</option>
					<option value="option3">图画式</option>
					</select> 
	<h3>笔记标签</h3>
	<input type="text" class="search-input" > 
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;
	 <button class="search-button">搜索</button>  
	 <button class="search-button">添加</button>  
</div>
     <div class ="container">
        <div class="card">
             <img src="img/idea.jpg">
             <h2>笔记名称1</h2>
         </div>
         <div class ="card">
             <img src="img/sql.jpg">
             <h2>笔记名称2</ h2>
         </div>
         <div class ="card">
             <img src="img/brain.jpg">
             <h2>笔记名称3</ h2>
         </div>
         <div class ="card">
             <img src="img/brain.jpg">
             <h2>笔记名称4</h2>
         </div>
         <div class ="card">
              <img src="img/doodle.jpg">
             <h2>笔记名称5</h2>
         </div>
         <div class ="card">
              <img src="img/java.jpg">
             <h2>笔记名称6</h2>
			 </div>
			 <div class="card">
			      <img src="img/idea.jpg">
			      <h2>笔记名称7</h2>
			  </div>
			  <div class ="card">
			      <img src="img/sql.jpg">
			      <h2>笔记名称8</ h2>
			  </div>
			  <div class ="card">
			      <img src="img/brain.jpg">
			      <h2>笔记名称9</ h2>
			  </div>
			  <div class ="card">
			      <img src="img/brain.jpg">
			      <h2>笔记名称10</h2>
			  </div>
			  <div class ="card">
			       <img src="img/doodle.jpg">
			      <h2>笔记名称11</h2>
			  </div>
			  <div class ="card">
			       <img src="img/java.jpg">
			      <h2>笔记名称12</h2>
         </div>
     </div>
</body >
</html>